<template>
	<view :style="[AppSkinVar]">
		<view class="welcome">绑定推广人</view>
		<view class="item e-flex e-m-b-40">
			<image class="img-36 e-m-r-30" src="/pages/public/static/public/phone.png"></image>
			
			<e-input type="tel" v-model="loginStr" border="none" placeholder="请输入推广人手机号" />
		</view>

		<view class="e-flex-xy-center">
			<view class="sub-btn">
				<e-button type="primary" shape="circle" size="large" :text="$t('common.确定')" :loading="isDisabled" :throttleTime="1000" @click="submit"></e-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import { postSupperAppBindRecommender } from '@/common/request/api';
import { useUser } from '@/common/stores';
import { useCurrentInstance } from '@/common/hooks';
import { page } from '@/common/utils'


const ctx = useCurrentInstance()
const userStore = useUser()
const isDisabled = ref(false)
const loginStr = ref('')

const submit = () => {
			if (!loginStr.value) {
				ctx.$toastApp('请输入推广人手机号')
				return
			}
			isDisabled.value = true
			postSupperAppBindRecommender({
				phone:loginStr.value
			}).then(res => {
					const pagesPath = page(2)
					if (!pagesPath||pagesPath === '/' || pagesPath === 'pages/public/account/bindRecommender') {
						setTabbarPageIndex(0);
						ctx.$switchTab('/pages/tabbar/index')
					} else {
						ctx.$back()
					}
					
			}).finally(() => {
				isDisabled.value = false
			})
		}
</script>

<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.welcome {
	width: 610rpx;
	margin: auto;
	padding: 80rpx 0;
	font-weight: 600;
}
.item {
	width: 610rpx;
	margin: auto;
	box-shadow: 0 2rpx 0 0 #eeeeee;
	padding: 26rpx 10rpx;
}

.sub-btn {
	width: 600rpx;
	padding-top: 100rpx;
}
</style>
